
/* 影视制作的样式文件 */
/* 将common.less引入到首页 @import"文件名" */
@import "common";
/* 引入导航栏工具 */ 
@import "navTool";


/* 影视剪辑模块 (105rem / @basefont)*/
.Creative_design {
    margin-top: ((105 + 23rem) / @basefont);
    //background-color: pink;
    background-color: #fff;
    width: (750rem / @basefont);
    overflow: hidden;
    .design_box {
        .design_top {
            position: relative;
            border-bottom: 0.04313rem rgba(243,243,243,1) solid;
            box-sizing: border-box;
            height: (114rem / @basefont);
            width: 100%;
            background-color: #fff;
            font-size: (30rem / @basefont);
            .design_title {
                position: absolute;
                left: (-30rem / @basefont);
                border-radius: (60rem / @basefont / 2);
                width: (198rem / @basefont);
                height: (60rem / @basefont);
                background-color: rgba(6,193,174,1);
                color: #fff;
                text-align: center;
                line-height: (60rem / @basefont);
            }
        }
        .h {
            height: (473rem / @basefont);
        }
        .design_body {
            position: relative;
            width: 100%;
            background: url('../upload/video.jpg') no-repeat;
            background-size: cover;
            background-position: center center ;
            .ico_font {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50% ,-50%);
                border-radius: (105.6rem / @basefont / 2);
                opacity: 0.8;
                height: (105.6rem / @basefont);
                width: (105.6rem / @basefont);
                text-align: center;
                line-height: (105.6rem / @basefont);
                font-family: 'icomoon';
                font-size: (50rem / @basefont);
                color: #fff;
                background-color: rgba(0, 0, 0, 0.5);
            }
        }
    }
}
/* 创意制作 */
.creative {
    margin-top: (23rem / @basefont);
    .design_box {
        .design_top {
            border-bottom: (2rem / @basefont) rgba(243,243,243,1) solid;
        } 
        .design_body {
            display: flex;
            padding: (36rem / @basefont);
            padding-bottom: 0;
            box-sizing: border-box;
            background-color: #fff;
            background: none;
            .design_body_left {
                flex: 1;
                margin-right: (12rem / @basefont);
            }
            .design_body_right {
                flex: 1;
                margin-left: (12rem / @basefont);
            }
            .s {
                display: flex;
                align-items: center;
                margin-bottom: (24rem / @basefont);
                width: 100%;
                box-shadow:rgb(0 0 0 / 10%) 0px 0.025rem 0.3rem 0px;
                background-color: #fff;
                img {
                    width: 100%;
                }
            }
            .h_336 {
                height: (336rem / @basefont);
            }
            .h_448 {
                height: (448rem / @basefont);
            }
        }
    }
}
/* 更多精彩 */
.more {
    margin-top: (23rem / @basefont);
    margin-bottom: (50rem / @basefont);
    .design_box {
        .design_body {
            position: relative;
            height: (380rem / @basefont);
            .focus {
                /* position: absolute;
                left: -(750rem / @basefont); */
                width: 100%;
                height: 100%;
                background-color: skyblue;
                a {
                    display: block;
                    float: left;
                    width: (750rem / @basefont);
                    height: 100%;
                    img {
                        height: 100%;
                        width: 100%;
                    }
                }
            }
            .bannerBall {
                position: absolute;
                bottom: 0;
                height: (45rem / @basefont);
                width: 100%;
                /* background-color: skyblue; */
                ul {
                    display: flex;
                    float: right;
                    margin-right: (20rem / @basefont);
                    //justify-content: center;
                    //align-items: center;
                    li {
                        display: block;
                        float: left;
                        margin: 0 (5rem / @basefont);
                        height: (12rem / @basefont);
                        width: (12rem / @basefont);
                        border-radius: (17rem / @basefont / 2);
                        background-color: rgba(170,170,170,.5); 
                    }
                    .current {
                        background-color: #fff;
                    }
                }
            }
        }
    }
}